import React, { useState, useEffect } from 'react'
import moment from 'moment'
import style from './index.module.less'
import { Table, Pagination, TimePicker, Button, DatePicker, message, Col, Form, Input, Row, Select, Space, theme } from 'antd'
import { getOrderList } from '@/api/order'
import { Link, NavLink } from 'react-router-dom'
const { RangePicker } = DatePicker;
const columns = [
  {
    title: '订单号',
    dataIndex: 'orderNo',
    key: 'orderNo',
  },
  {
    title: '下单时间',
    dataIndex: 'orderTime',
    key: 'orderTime',
  },
  {
    title: '联系电话',
    dataIndex: 'phone',
    key: 'phone'
  },
  {
    title: '收货人',
    dataIndex: 'consignee',
    key: 'consignee',
  },
  {
    title: '送货地址',
    dataIndex: 'deliverAddress',
    key: 'deliverAddress',
  },
  {
    title: '送达时间',
    dataIndex: 'deliveryTime',
    key: 'deliveryTime',
  },
  {
    title: '备注',
    dataIndex: 'remarks',
    key: 'remarks',
  },
  {
    title: '订单金额',
    dataIndex: 'orderAmount',
    key: 'orderAmount',
  },
  {
    title: '订单状态',
    dataIndex: 'orderState',
    key: 'orderState',
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    render: (_, record) => {
      return (
        <>
          <a href="#">查看</a>
          <NavLink to="/home/orederEdit" state={{id: record.id}} style={{ marginLeft: '10px' }}>编辑</NavLink>
        </>
      )
    }
  }
]

export default function OrderList() {
  const { Option } = Select;
  const [data, setData] = useState([
    {
      key: '1',
      id: '1',
      orderNo: '',
      orderTime: '2021-01-01 12:00:00',
      phone: '123456789',
      consignee: '张三',
      deliverAddress: '',
      deliveryTime: '2021-01-01 12:00:00',
      remarks: '',
      orderAmount: '',
      orderState: ''
    }
  ])
  const [total, setTotal] = useState(0)
  const [currentPage, setCurrentPage] = useState(1)
  const [pageSize, setPageSize] = useState(5)
  const [search, setSearch] = useState({
    orderNo: '',
    consignee: '',
    phone: '',
    orderState: '',
    date: ''
  })
  const change = (page, pageSize) => {
    setCurrentPage(page)
    setPageSize(pageSize)
  }
  const getList = async () => {
    const res = await getOrderList({ currentPage, pageSize, ...search })
    res.data.forEach((item, index) => {
      item.key = index
    })
    setData(res.data)
    setTotal(res.total)
  }
  useEffect(() => {
    getList()
  }, [currentPage, pageSize, search])

  const onFinish = (values) => {
    if (values == '') {
      message.error('请输入查询字段')
    } else {
      //处理日期
      if (values.date) {
        // 时间处理
        const formattedDate0 = moment(values.date[0].$d).format("YYYY-MM-DD HH:mm:ss");
        const formattedDate1 = moment(values.date[1].$d).format("YYYY-MM-DD HH:mm:ss");
        // 添加 date 参数，格式为 ["2025-04-17 11:36:53","2025-04-22 11:36:53"] 后端要求
        values.date = `["${formattedDate0}","${formattedDate1}"]`;
        // 添加 date1[] 参数
        values['date1[]'] = [formattedDate0, formattedDate1];
      }
      setSearch(values)
    }
  }
  return (
    <>
      {/* 搜索框 */}
      <Form name="advanced_search" className={style.form} onFinish={onFinish}>
        <Form.Item label="订单号" name="orderNo" style={{ width: 274 }}>
          <Input placeholder="请输入订单号" />
        </Form.Item>
        <Form.Item label="收货人" name="consignee" style={{ width: 274, marginLeft: 30 }}>
          <Input placeholder="请输入收货人" />
        </Form.Item>
        <Form.Item label="手机号" name="phone" style={{ width: 274, marginLeft: 30 }}>
          <Input placeholder="请输入手机号" />
        </Form.Item>
        <Form.Item label="订单状态" name="orderState" style={{ width: 274, marginLeft: 30 }}>
          <Select placeholder='请选择订单状态'>
            <Option value='已受理'></Option>
            <Option value='派送中'></Option>
            <Option value='已完成'></Option>
          </Select>
        </Form.Item>
        <Form.Item name="date" label="选择时间" >
          <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" style={{ marginLeft: 30, }}>
            搜索
          </Button>
        </Form.Item>
      </Form>
      {
        data.orderNo != '' ?
          <>
            <Table
              columns={columns}
              dataSource={data}
              pagination={false}
            />
            <Pagination
              key={`${currentPage}-${pageSize}`}
              total={total}
              showSizeChanger
              showQuickJumper
              defaultCurrent={currentPage}
              defaultPageSize={pageSize}
              showTotal={total => `共 ${total} 条`}
              onChange={change}
              pageSizeOptions={['5', '10', '15', '20']}
              style={{ marginTop: 20 }}
            />
          </>
          :
          <Table columns={columns} dataSource={[]} pagination={false} />
      }
    </>
  )
}
